<!-- index -->
<template>
  <div class="index animate__animated animate__zoomIn">
    <template v-if="indexFlag">
      <!-- 头部 -->
      <div class="index-top">
        <div class="title">
          <dv-decoration-5 :dur="5" style="width: 100%; height: 100%" />
          <h1 @click="testMap">{{ this.$store.getters.getTitle }}</h1>
        </div>
        <!-- 链接 -->
        <div class="index-link">
          <div class="link-left">
            <div class="links link1" @click="$router.push('supervision-count')">
              监察<span class="el-icon-caret-right"></span>
            </div>
            <div class="links link2" @click="$router.push('maintain-count')">
              维保<span class="el-icon-caret-right"></span>
            </div>
          </div>
          <div class="link-right">
            <div class="links link3" @click="$router.push('/rescue-count')">
              救援统计<span class="el-icon-caret-right"></span>
            </div>
            <div class="links link4" @click="$router.push('monitor-count')">
              预警<span class="el-icon-caret-right"></span>
            </div>
          </div>
        </div>
      </div>
      <!-- 功能模块 -->
      <div class="index-tools">
        <IndexTools :toolsData="toolsData"></IndexTools>
      </div>
      <!-- 主体 -->
      <div class="index-bd" id="Index">
        <!-- left -->
        <div class="box left">
          <IndexLeft></IndexLeft>
        </div>
        <!-- main -->
        <div class="box main">
          <IndexMain :talkingNum="toolsData.talkingNum"></IndexMain>
        </div>
        <!-- right -->
        <div class="box right">
          <IndexRight></IndexRight>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="index-loading">
        <!-- <dv-decoration-9 style="width:2rem;height:2rem;color:@FontColor;font-size:0.16rem">加载中...</dv-decoration-9> -->
        <dv-decoration-12 style="width: 5rem; height: 5rem" />
      </div>
    </template>
  </div>
</template>

<script>
// import PublicEcharts from "../components/charts/PublicEcharts";
// import $ from "jquery";
import IndexLeft from "../components/container/IndexLeft";
import IndexTools from "../components/container/IndexTools";
import IndexMain from "../components/container/IndexMain";
import IndexRight from "../components/container/IndexRight";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    IndexLeft,
    IndexTools,
    IndexMain,
    IndexRight,
  },
  data() {
    //这里存放数据
    return {
      msg: this.$store.state.title,
      nowTime: "",
      timer: null,
      netOk: null,
      indexFlag: false,
      toolsData: {},
    };
  },
  props: {},
  //监听属性 类似于data概念
  computed: {
    areaCode() {
      return this.$store.state.listAreaIndex;
    },
  },
  //监控data中的数据变化
  watch: {
    areaCode(newVal, oldVal) {
      // console.log("区域code有改动 -- index: [" + newVal + "]");
      this.init();
    },
  },
  //方法集合
  methods: {
    async init() {
      // console.log('init...');
      this.indexFlag = false;

      // 获取县区列表
      if (this.$store.getters.getAreaList.length <= 0) {
        let areaList = await this.$http.postGetBoroughCodeList(params);
        let ret = areaList.data;
        if (ret.errorCode != 0) {
          console.log("后台运行异常!");
          return console.log(ret);
        }
        let arr = ret.data;
        arr.unshift({
          area_name: "全市",
          area_code: 320700000000,
        });
        console.log("县区列表..");
        console.log(arr);
        this.$store.commit("setAreaList", arr);
      }

      // 获取设备列表
      if (this.$store.getters.getDevList.length <= 0) {
        // 获取类型
        let type = await this.$http["postGetDevKindList"]();
        let ret1 = type.data;
        if (ret1.errorCode != 0) {
          console.log("后台运行异常!");
          return console.log(ret1);
        }
        // console.log(ret1.data);
        ret1.data.unshift({
          dev_name: "全部",
          dev_code: "",
        });
        this.$store.commit("setDevList", ret1.data);
      }

      // 获取隐患等级列表
      if (this.$store.getters.getHiddenLevel.length <= 0) {
        // 获取类型
        let type = await this.$http["postHiddenLevel"]();
        let ret1 = type.data;
        if (ret1.errorCode != 0) {
          console.log("后台运行异常!");
          return console.log(ret1);
        }
        // console.log(ret1.data);
        ret1.data.unshift({
          levelName: "全部",
          levelValue: "",
        });
        this.$store.commit("setHiddenLevel", ret1.data);
      }

      // 获取任务来源列表
      if (this.$store.getters.getTasksLevel.length <= 0) {
        // 获取类型
        let type = await this.$http["postTasksLevel"]();
        let ret1 = type.data;
        if (ret1.errorCode != 0) {
          console.log("后台运行异常!");
          return console.log(ret1);
        }
        // console.log(ret1.data);
        ret1.data.unshift({
          levelName: "全部",
          levelValue: "",
        });
        this.$store.commit("setTasksLevel", ret1.data);
      }

      let area_code = this.$store.getters.getAreaList[
        this.$store.getters.getListAreaIndex
      ]["area_code"];
      let params = { area_code };

      // 左4
      let leftData = await this.$http.postGetHomeBannerLeft(params);
      let ret1 = leftData.data;
      if (ret1.errorCode != 0) {
        console.log("后台运行异常!");
        return console.log(ret1);
      }

      // 右 4
      let rightData = await this.$http.postScreennums(params);
      let ret2 = rightData.data;
      if (ret2.errorCode != 0) {
        console.log("后台运行异常!");
        return console.log(ret2);
      }

      Object.assign(this.toolsData, ret1.data, ret2.data);
      this.$store.commit("setIndexFlag", true);
      this.indexFlag = true;
      clearInterval(this.netOk);
    },
    testMap() {
      // this.$router.push('/bd-map')
      this.init();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // this.timer = setInterval(this.nowTimes, 1000);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.init();
    if (!this.indexFlag) {
      console.log("请求中...");
      this.netOk = setInterval(this.init, 5000);
    }
    this.timer = setInterval(this.nowTimes, 1000);
    window.onload = function () {
      console.log("加载完毕！");
    };
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {
    return false;
  }, //生命周期 - 销毁完成
  activated() {
    console.log("加载index缓存页面");
  }, //如果页面有keep-alive缓存功能，这个函数会触发
  beforeRouteLeave(to, from, next) {
    next();
  },
  beforeRouteEnter(to, from, next) {
    // console.log("ENTER INDEX");
    next();
  },
};
</script>
<style lang='less' scoped>
// element ui
//@import url(); 引入公共css类
.index {
  width: 100%;
  height: 100%;
  .index-top {
    width: 100%;
    height: 12%;
    position: relative;
    .title {
      width: 100%;
      height: 100%;
      position: relative;
      h1 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -200%);
        color: @FontColor;
        font-size: 0.4rem;
      }
    }

    .index-link {
      width: 100%;
      // height: 10%;
      position: absolute;
      bottom: 25%;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 0.2rem;
      .link-left,
      .link-right {
        display: flex;
        .links {
          padding: 0.08rem 0.18rem;
          color: #eee;
          border-radius: 0.06rem;
          font-size: 0.2rem;
          background-color: @Blue;
          border: 2px solid #fff;
          margin: 0 0.1rem;
        }
        .links:hover {
          color: #fff;
          font-weight: 600;
        }
      }
    }
  }
  // 功能模块栏
  .index-tools {
    width: 100%;
    height: 10%;
  }
  // 大主体
  .index-bd {
    width: 100%;
    height: 78%;
    // background-color: pink;
    display: flex;
    .box {
      height: 100%;
      flex: 1;
    }
    .left,
    .right {
      flex: 3;
    }

    // 中间
    .main {
      height: 100%;
      flex: 4;
    }
  }

  // 加载框
  .index-loading {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@keyframes wordsLoop {
  0% {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}
</style>